<template>
  <div id="mewsScoreSurface">
    <div class="clearfix">
      <div class="link-list center-block pull-left">
        <router-link v-for="(item,index) in list"
                     :key="item.value" :to="{path:item.path,query:{item:7,ind:1,ins:index}}"
                     :class="{'router-link-exact-active':ins == index}"
                     @click.native="changeBgc(index)">
          {{item.label}}
        </router-link>
      </div>
      <button class="pull-right" @click="addListData">新增</button>
    </div>
    <div class="mewsScoreSurfaceContent">
      <div class="vsThead">
        <table class="table">
          <thead>
            <tr>
              <th class="text-center" width="30%">评分时间</th>
              <th class="text-center" width="20%">得分</th>
              <th class="text-center" width="20%">评分人</th>
              <th class="text-center" width="20%">操作</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="vsTbody">
        <table class="table table-striped" v-if="listData.length">
          <tbody>
            <tr v-for="item in listData" @click="editList($event)" :data-id="item.Id">
              <td class="text-center" width="30%">{{item.ScoreTime | formatDate}}</td>
              <td class="text-center" width="20%">{{item.MewsScore}}</td>
              <td class="text-center" width="20%">{{item.Doctor_Name}}</td>
              <td class="text-center" width="20%"> <a href="javascript:void(0)" @click="removeList($event)" class="athm-btn--mini" :data-id="item.Id">删除</a> </td>
            </tr>
          </tbody>
        </table>
        <loading v-if="isShow && listData.length== 0"></loading>
        <noSearch v-if="!isShow && listData.length == 0"></noSearch>
      </div>
      <modal ref="alert" :title="title" :sureBtn="addScore" :cancelBtn="cancelScore" :btnSave="'保存'">
        <div class="headerMod clearfix">
          <p class="pull-left">总分 :  <span class="red" style="font-size:16px;">{{MewsScore}}</span></p>
          <vue-datepicker-local v-model="emptyTime" class="pull-left" clearable @clear="clear" :placeholder="'请选择时间'" v-if="status == 0" />
          <vue-datepicker-local v-model="emptyTime" class="pull-left" clearable @clear="clear" disabled :placeholder="'请选择时间'" v-if="status == 1" />
          <div class="pull-left">
            <div :class="['select',{noSearchDate:status == 1}]" v-clickoutside="handleCloseDate" style="width:100px;margin-left:10px;height:36px;">
              <p :class="{'up' : isShowDate}" @click="showDate">{{date}}</p>
              <ul :class="['list-link',{'show': isShowDate}]" style="width:100px;">
                <li v-for="(item,index) in dateTab" :key="item.value"
                    @click="changeDate($event)">
                  {{item.label}}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="content clearfix">
          <div class="pull-left">
            <label>收缩压 : </label> <input type="number" v-model="addData.SystolicPressure" /> <span class="red">{{SystolicPressureScore}}</span><br />
            <span style="display: inline-block;margin-top: 8px;margin-left: 50px;color: #999;" v-if="addData.SystolicPressureDate != ''">{{addData.SystolicPressureDate |filterDates}}</span>
          </div>
          <div class="pull-left">
            <label>心 率 : </label> <input type="number" v-model="addData.HeartRate" /> <span class="red">{{HeartRateScore}}</span> <br />
            <span style="display: inline-block;margin-top: 8px;margin-left: 50px;color: #999;" v-if="addData.HeartRateDate != ''">{{addData.HeartRateDate|filterDates}}</span>
          </div>
          <div class="pull-left">
            <label>呼 吸 : </label> <input type="number" v-model="addData.RespiratoryFrequency" /> <span class="red">{{RespiratoryFrequencyScore}}</span><br />
            <span style="display: inline-block;margin-top: 8px;margin-left: 50px;color: #999;" v-if="addData.RespiratoryFrequencyDate !=''">{{addData.RespiratoryFrequencyDate |filterDates}}</span>
          </div>
          <div class="pull-left">
            <label>体 温℃: </label> <input type="number" v-model="addData.Temperature" /> <span class="red">{{TemperatureScore}}</span><br />
            <span style="display: inline-block;margin-top: 8px;margin-left: 50px;color: #999;" v-if="addData.TemperatureDate != ''">{{addData.TemperatureDate |filterDates}}</span>
          </div>
          <div class="pull-left">
            <label style="margin-top:5px;">意 识 : </label>
            <div class="select" v-clickoutside="handleClose">
              <p :class="{'up' : isShowShift}" @click="showShift">{{shift}}</p>
              <ul :class="['list-link',{'show': isShowShift}]">
                <li v-for="(item,index) in tab" :key="item.value"
                    @click="changeShift($event)">
                  {{item.label}}
                </li>
              </ul>
            </div> <span style="margin-left:170px;" class="red">{{addData.Neuro}}</span>
          </div>
        </div>
      </modal>
    </div>
    <confirm ref="alertRemove" :message="'确认删除该项评分吗？'" :sureBtn="removeListData"> </confirm>
  </div>
</template>
<script>
  import { formatDate, standardDate } from "@/components/common/date"; //引入时间转换JS
  import modal from '@/components/modal/modal'
  import loading from '@/components/loading/loading'
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
  import VueDatepickerLocal from '@/components/datepicker/VueDatepickerLocal'
  import confirm from '@/components/confirm/confirm'
  import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
  import { apiAddOrUpdatePatientMewsScore, apiGetMewsScoreListByTime, apiGetVisit, apiGetMewsScoreByID, apiDeletePatientMewsScore } from '@/api/api'
  export default {
    data() {
      return {
        list: [
          { path: '/scorePage/mewsScoreChart', label: 'MEWS评分图' },
          { path: '/scorePage/mewsScoreSurface', label: 'MEWS评分表' },
        ],
        isShowShift: false,
        shift: '清楚(警觉)',
        tab: [
          { label: '清楚(警觉)', value: 0 },
          { label: '对声音有反应', value: 1 },
          { label: '对疼痛有反应', value: 2 },
          { label: '无反应', value: 3 }
        ],
        isShowDate: false,
        date: '02:00',
        dateTab: [
          { label: '02:00', value: 0 },
          { label: '10:00', value: 1 },
          { label: '18:00', value: 2 },
        ],
        emptyTime: standardDate(new Date()),
        ins: 1,
        listData: [],
        isShow: true,      //标识是否显示loding还是无数据
        noSearch:false, //标识是否查询
        status: 0,      //标识是否为编辑还是新增
        title: '新增MEWS评分',
        id: 0,         //存储评分的ID
        ScoreTime: standardDate(new Date()),
        addData: {
          HeartRate: '', //心率
          SystolicPressure: '', // 收缩压
          RespiratoryFrequency: '', // 呼吸频率
          Temperature: '',     // 温度
          Neuro: 0, // 神经（意识）
          HeartRateDate: '',
          SystolicPressureDate: '',
          RespiratoryFrequencyDate: '',
          TemperatureDate: '',
          ScoreTime: standardDate(new Date()) + ' ' + '02:00',
          PateintVisitId: this.$store.getters.ID,
          Doctor_Name: JSON.parse(sessionStorage.getItem('user')).Name
        }
      }
    },
    computed: {
      HeartRateScore: function () {          //心率评分
        if (this.addData.HeartRate <= 40 && this.addData.HeartRate != '') {
          return 2;
        }
        else if (this.addData.HeartRate >= 41 && this.addData.HeartRate <= 50) {
          return 1;
        }
        else if (this.addData.HeartRate >= 51 && this.addData.HeartRate <= 100) {
          return 0;
        }
        else if (this.addData.HeartRate >= 101 && this.addData.HeartRate <= 110) {
          return 1;
        }
        else if (this.addData.HeartRate >= 111 && this.addData.HeartRate <= 129) {
          return 2;
        }
        else if (this.addData.HeartRate >= 130) {
          return 3;
        }
        else if (this.addData.HeartRate == '') {
          return 0;
        }
      },
      SystolicPressureScore: function () {     //收缩压评分
        if (this.addData.SystolicPressure < 70 && this.addData.SystolicPressure != '')
          return 3;
        else if (this.addData.SystolicPressure >= 70 && this.addData.SystolicPressure <= 80)
          return 2;
        else if (this.addData.SystolicPressure >= 81 && this.addData.SystolicPressure <= 100)
          return 1;
        else if (this.addData.SystolicPressure >= 101 && this.addData.SystolicPressure <= 199)
          return 0;
        else if (this.addData.SystolicPressure >= 200)
          return 2;
        else
          return 0;
      },
      RespiratoryFrequencyScore: function () {  //呼吸评分
        if (this.addData.RespiratoryFrequency < 9 && this.addData.RespiratoryFrequency != '')
          return 2;
        else if (this.addData.RespiratoryFrequency >= 9 && this.addData.RespiratoryFrequency <= 14)
          return 0;
        else if (this.addData.RespiratoryFrequency >= 15 && this.addData.RespiratoryFrequency <= 20)
          return 1;
        else if (this.addData.RespiratoryFrequency >= 21 && this.addData.RespiratoryFrequency <= 29)
          return 2;
        else if (this.addData.RespiratoryFrequency >= 30)
          return 3;
        else
          return 0;
      },
      TemperatureScore: function () {      //体温评分
        if (this.addData.Temperature < 35 && this.addData.Temperature != '')
          return 2;
        else if (this.addData.Temperature >= 35 && this.addData.Temperature <= 38.4)
          return 0;
        else if (this.addData.Temperature > 38.4)
          return 2;
        else
          return 0;

      },
      MewsScore: function () {  //总分
        return this.TemperatureScore + this.RespiratoryFrequencyScore + this.SystolicPressureScore + this.HeartRateScore + this.addData.Neuro;
      }


    },
    watch: {
      ScoreTime: {
        handler(curVal, oldVal) {
          if (this.ScoreTime == '') {
            //console.log(this.ScoreTime + ' ' + this.date)
            this.addData.ScoreTime = standardDate(new Date()) + ' ' + '02:00';
            //this.addListData();
          } else {
            //console.log(this.ScoreTime + ' ' + this.date)
            this.addData.ScoreTime = this.ScoreTime + ' ' + this.date;
            if (this.status == 0 && !this.noSearch) {
              this.addListData();
            } else if (this.status == 1 && !this.noSearch) {
              this.editListData();
            }
           
          }
        }
      },
      date: {
        handler(curVal, oldVal) {
          //console.log(curVal)
          //console.log(this.date)
          this.addData.ScoreTime = this.ScoreTime + ' ' + this.date;
          if (this.status == 0 && !this.noSearch) {
            this.addListData();
          } else if (this.status == 1 && !this.noSearch) {
            this.editListData();
          }
        }
      },
      shift: {
        handler(curVal, oldVal) {
          //console.log(curVal == 'A 班')  //新值
          //this.$store.state.stateData.status = 2;
          if (this.shift == '清楚(警觉)') {
            //console.log(this.shift);
            this.addData.Neuro = 0;
          } else if (this.shift == '对声音有反应') {
            //console.log(this.shift);
            this.addData.Neuro = 1;
          } else if (this.shift == '对疼痛有反应') {
            this.addData.Neuro = 2;
          } else if (this.shift = '无反应') {
            //console.log(this.shift);
            this.addData.Neuro = 3;
          }
        }
      },
    },
    created() {
      this.GetMewsScoreByTime(); 
    },
    mounted() {

      if (this.$route.query.ins) {
        this.ins = this.$route.query.ins;
      } else {
        this.ins = 1;
      }
      Bus.$on("timePicker", e => {
        this.ScoreTime = e.trim();
      });
    },
    methods: {
      handleClose() {
        this.isShowShift = false;
      },
      showShift() {
        this.isShowShift = !this.isShowShift;
      },
      changeShift(event) {
        this.isShowShift = false;
        if ($.trim(event.currentTarget.innerHTML) != this.shift) {  // 当选择的值跟当前的值不一样时
          this.shift = $.trim(event.currentTarget.innerHTML);  //赋值 
        }
      },
      handleCloseDate() {
        this.isShowDate = false;
      },
      showDate() {
        if (this.status == 0) {
          this.isShowDate = !this.isShowDate;
        }
      },
      changeDate(event) {
        this.isShowDate = false;
        if ($.trim(event.currentTarget.innerHTML) != this.date) {  // 当选择的值跟当前的值不一样时
          this.date = $.trim(event.currentTarget.innerHTML);  //赋值 
        }
      },
      clear() {
        this.emptyTime = '';
      },
      cancelScore() {   //弹出框取消按钮点击事件
        this.noSearch = true;
        this.ScoreTime = standardDate(new Date());
        this.emptyTime = standardDate(new Date());
        this.date = '02:00';
      },
      addListData() {     //点击新增按钮
        //console.log('新增');
        this.noSearch = false;
        this.addData.Temperature = '';
        this.addData.RespiratoryFrequency = '';
        this.addData.HeartRate = '';
        this.addData.SystolicPressure = '';
        this.addData.TemperatureDate = '';
        this.addData.RespiratoryFrequencyDate = '';
        this.addData.HeartRateDate = '';
        this.addData.SystolicPressureDate = '';
        this.status = 0;
        this.title = '新增MEWS评分';
        apiGetVisit({
          PatientID: this.$store.getters.ID,
          date: this.addData.ScoreTime
        })
          .then(res => {
            if (JSON.parse(res).ResultCode == 1) {
              //console.log(JSON.parse(res));
              for (let item of JSON.parse(res).ObjectData) {
                if (item.Name == '体温') {
                  this.addData.Temperature = item.Values;
                  this.addData.TemperatureDate = item.PER_Time;
                }
                if (item.Name == '自主呼吸频率') {
                  this.addData.RespiratoryFrequency = item.Values;
                  this.addData.RespiratoryFrequencyDate = item.PER_Time;
                }
                if (item.Name == '心率') {
                  this.addData.HeartRate = item.Values;
                  this.addData.HeartRateDate = item.PER_Time;
                }
                if (item.Name == '无创收缩压') {
                  this.addData.SystolicPressure = item.Values;
                  this.addData.SystolicPressureDate = item.PER_Time;
                }
                //console.log(item);
              }
              this.$refs.alert.show();
            } else {
              this.$toast.center(JSON.parse(res).Message);
            }

          })
          .catch(err => {
            this.$toast.center('当前请求有问题，请联系管理员！');
          })

      },
      editList(event) {             //编辑评分数据
        this.noSearch = false;
        this.status = 1; //为1 时是编辑
        this.title = '编辑MEWS评分';
        this.addData.TemperatureDate = '';
        this.addData.RespiratoryFrequencyDate = '';
        this.addData.HeartRateDate = '';
        this.addData.SystolicPressureDate = '';
        //console.log(event.currentTarget.getAttribute("data-id"));
        this.id = event.currentTarget.getAttribute("data-id");
        this.editListData();
      },
      editListData() {     //编辑数据绑定接口
        apiGetMewsScoreByID({
          id: this.id
        })
          .then(res => {
            if (JSON.parse(res).ResultCode == 1) {
              //console.log(JSON.parse(res).ObjectData);
              this.addData.Temperature = JSON.parse(res).ObjectData.Temperature;  // 体温赋值
              this.addData.RespiratoryFrequency = JSON.parse(res).ObjectData.RespiratoryFrequency;  // 呼吸频率赋值
              this.addData.HeartRate = JSON.parse(res).ObjectData.HeartRate;  // 心率赋值
              this.addData.SystolicPressure = JSON.parse(res).ObjectData.SystolicPressure;  // 收缩压赋值
              this.addData.Doctor_Name = JSON.parse(res).ObjectData.Doctor_Name         //评分人
              //console.log(JSON.parse(res).ObjectData.ScoreTime.substring(11, 16));
              this.emptyTime = JSON.parse(res).ObjectData.ScoreTime.substring(0, 10);
              this.ScoreTime = JSON.parse(res).ObjectData.ScoreTime.substring(0, 10);
              this.date = JSON.parse(res).ObjectData.ScoreTime.substring(11, 16);
              if (this.shift == '清楚(警觉)') {
                //console.log(this.shift);
                this.addData.Neuro = 0;
              } else if (this.shift == '对声音有反应') {
                //console.log(this.shift);
                this.addData.Neuro = 1;
              } else if (this.shift == '对疼痛有反应') {
                this.addData.Neuro = 2;
              } else if (this.shift = '无反应') {
                //console.log(this.shift);
                this.addData.Neuro = 3;
              }
              if (JSON.parse(res).ObjectData.Neuro == 0) {
                this.shift = '清楚(警觉)';
              } else if (JSON.parse(res).ObjectData.Neuro == 1) {
                this.shift = '对声音有反应';
              } else if (JSON.parse(res).ObjectData.Neuro == 2) {
                this.shift = '对疼痛有反应';
              } else if (JSON.parse(res).ObjectData.Neuro == 3) {
                this.shift = '无反应';
              }
              this.$refs.alert.show();
            } else {
              this.$toast.center(JSON.parse(res).Message);
            }
          })
          .catch(err => {
            this.$toast.center('当前请求有问题，请联系管理员！');
          })

      },
      removeList(event) {      //删除按钮点击事件
        event.stopPropagation(); //阻止事件冒泡
        this.id = event.currentTarget.getAttribute("data-id");
        this.$refs.alertRemove.show();
        //console.log(this.id)
      },
      removeListData() {    //点击删除按钮出现的弹出框确认按钮删除评分事件
        apiDeletePatientMewsScore({
          id : this.id
        })
          .then(res => {
            if (res.ResultCode == 1) {
              this.$toast.center(res.Message);
              this.GetMewsScoreByTime(); 
            } else {
              this.$toast.center(res.Message);
            }
          })
          .catch(err => {
            this.$toast.center('当前请求有问题，请联系管理员！');
          })
      },
      changeBgc(index) {
        this.ins = index;
      },
      GetMewsScoreByTime() {                   //查询方法
        apiGetMewsScoreListByTime({
          visitID: this.$store.getters.ID
        })
          .then(res => {
            if (res.ResultCode == 1) {
              if (res.ListResult.length == 0) {
                this.isShow = false;
                this.listData = [];
              } else {
                this.isShow = true;
                this.listData = res.ListResult;
              }
              //console.log(res);
            } else {
              this.isShow = false;
              this.listData = [];
            }

          })
          .catch(err => {
            this.$toast.center('当前请求有问题，请联系管理员！');
          })
      },
      addScore() {
        if (this.ScoreTime == '') {
          this.$toast.center('请选择时间！！！');
          setTimeout(() => {
            this.$refs.alert.show();
          }, 2500)
        } else if (this.addData.Temperature == '' || this.addData.RespiratoryFrequency == '' || this.addData.HeartRate == '' || this.addData.SystolicPressure == '') {
          this.$toast.center('评分数据不能为空！！！');
          setTimeout(() => {
            this.$refs.alert.show();
          }, 2500)
        }  else {
          this.addData.ScoreTime = this.ScoreTime + ' ' + this.date;
          //console.log(this.addData.ScoreTime)
          apiAddOrUpdatePatientMewsScore({
            mewsScoreJson: JSON.stringify(this.addData),
          })
            .then(res => {
              if (res.ResultCode == 1) {
                if (this.status == 0) {    //为1 时是编辑 0时为新增
                  this.isShow = true;
                  this.$toast.center('新增评分成功');
                  this.GetMewsScoreByTime();
                  this.noSearch = true;
                  this.ScoreTime = standardDate(new Date());
                  this.emptyTime = standardDate(new Date());
                } else {             //为1 时是编辑 0时为新增
                  this.isShow = true;
                  this.$toast.center('编辑评分成功');
                  this.GetMewsScoreByTime();
                  this.noSearch = true;
                  this.ScoreTime = standardDate(new Date());
                  this.emptyTime = standardDate(new Date());
                }
              
              } else {
                this.isShow = false;
                this.$toast.center(res.Message);
              }
            })
            .catch(err => {
              this.$toast.center('当前请求有问题，请联系管理员！');
            })
        }

      },
    },
    filters: {
      formatDate(time) {
        var date = new Date(parseInt(time.substring(6, 19)));
        return formatDate(date, "yyyy-MM-dd hh:mm");
      },
      filterDates(time) {
        if (!time) {
          return ''
        } else {
          return time.replace('T', '  ').substring(5, 17);
        }
      }
    },
    components: {
      loading,
      noSearch,
      VueDatepickerLocal,
      modal,
      confirm

    }
  }
</script>
<style scoped>
  .athm-btn--mini{
    color: red;
    background-color: #fff;
    border: 1px solid red;
    min-height: 24px;
    font-size: 14px;
    line-height: 22px;
    padding: 5px 10px;
    border-radius: 2px;
    cursor:pointer;
  }
  .red{
    color:red;
  }
  .link-list a {
    font-size: 14px;
    display: inline-block;
    margin-right: 15px;
  }

  .link-list {
    padding-left: 45px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 50px;
  }
 
  .link-list a:after {
    display: inline-block;
    content: '';
    width: 1px;
    height: 20px;
    background-color: #ccc;
    margin-left: 10px;
    vertical-align: middle;
  }
    .link-list + button {
      padding: 7px 15px;
      background-color: #11a7f3;
      color: #fff;
      vertical-align: middle;
      margin-right: 80px;
    }
    .link-list a:last-child:after {
      width: 0;
    }

    .link-list a.router-link-exact-active {
      color: #11a7f3;
    }
    .link-list a.router-link-active {
      color: #11a7f3;
    }
  .mewsScoreSurfaceContent {
    width:95%;
    margin:0 auto;
    height: calc(100vh - 230px );
  }
  .table > thead > tr > th {
    border-bottom: none;
  }

  .vsThead, .vsTbody {
    width: 100%;
    /*border:1px solid #f4f4f4;*/
    border-top: none;
  }

  .vsContent {
    margin-top: -10px;
    padding-right: 30px;
  }

  .table {
    margin-bottom: 0;
  }

  .vsThead thead tr {
    height: 42px;
    line-height: 42px;
    background-color: #11a7f3;
    color: #fff;
  }

  .vsThead > thead > tr > th {
    border-bottom: none;
  }

  .vsTbody {
    position: relative;
    height: calc(100% - 60px);
    overflow-y: auto;
  }

    .vsTbody tbody tr td {
      padding: 10px 0;
      vertical-align: middle;
      border-top: 1px solid #ddd;
      color: #333;
      border-left: 1px solid #ddd;
    }
      .vsTbody tbody tr td:first-child {
        border-left: 1px solid #ddd;
      }
      .vsTbody tbody tr td:last-child {
        border-right: 1px solid #ddd;
      }
      .vsTbody tbody > tr:last-child > td {
        border-bottom: 1px solid #ddd;
      }
    .vsTbody tbody > tr:first-child > td {
      border-top: none;
    }
  .headerMod {
    height: 36px;
    line-height: 36px;
    margin-bottom: 15px;
    padding-top: 15px;
  }

    .headerMod > p {
      margin-right: 150px;
    }

  .content input {
    width: 85px;
    height: 32px;
    padding-left: 5px;
    border: 1px solid #ddd;
    margin-right: 15px;
  }

  .content > div {
    margin-top: 25px;
  }

  .content label {
    font-weight: normal;
  }

  .content span {
    margin-right: 25px;
  }

  .select {
    position: absolute;
    display: inline-block;
    margin-right: 25px;
    width: 150px;
    height: 34px;
    line-height: 34px;
    background: #fff;
    padding-left: 10px;
    border: 1px solid #e5e5e5;
  }
  .noSearchDate {
    background: #ddd;
  }
    .select p {
      color: #000;
      position: relative;
    }

      .select p:after {
        display: inline-block;
        content: '';
        width: 10px;
        height: 10px;
        background-image: url("../../../../static/images/unfold_arron.png");
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        margin-right: 10px;
        margin-top: 12px;
        float: right;
      }

      .select p.up:after {
        background-image: url("../../../../static/images/up_arron.png");
      }

  .list-link {
    position: relative;
    z-index: 9999;
    display: none;
    border: 1px solid #eee;
    left: -10px;
    width: 150px;
    background-color: #fff;
    box-shadow: 2px 5px 5px #ccc;
  }

    .list-link li {
      text-align: center;
      cursor: pointer;
    }

      .list-link li:hover {
        background-color: #f6f6f6;
        border-bottom: 1px solid #ccc;
      }
      @media screen and (max-width: 768px) {
}
@media screen and (max-width: 425px) {
  .link-list {
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-right: 0;
  }
}
@media screen and (max-width: 575px) {
  .link-list + button {
      margin-right: 10px;
      margin-bottom: 10px;
    }
}

</style>
